<template>
  <div class="partner-table-container">
    <h2>合作伙伴列表</h2>
    
    <table class="partner-table">
      <thead>
        <tr>
          <th>合作伙伴名称</th>
          <th>合作领域</th>
          <th>合作时间</th>
          <th>合作成果</th>
          <th>重点合作项目</th>
        </tr>
      </thead>
      
      <tbody>
        <tr v-for="(partner, index) in partners" :key="index">
          <td class="partner-name">{{ partner.name }}</td>
          <td>{{ partner.cooperationArea }}</td>
          <td>{{ partner.cooperationSince }}</td>
          <td>{{ partner.cooperationAchievements }}</td>
          <td>
            <ul class="project-list">
              <li v-for="(project, pIndex) in partner.keyProjects" :key="pIndex">
                {{ project }}
              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      partners: [
        {
          name: "ABC科技有限公司",
          cooperationArea: "区块链云服务、分布式存储",
          cooperationSince: "2021年6月",
          cooperationAchievements: "共同建立区块链BaaS平台，服务超200家企业客户",
          keyProjects: [
            "企业联盟链云平台",
            "跨境贸易数据存证系统",
            "政务数据共享平台"
          ]
        },
        {
          name: "金融科技研究院",
          cooperationArea: "数字资产、智能合约、监管科技",
          cooperationSince: "2020年12月",
          cooperationAchievements: "联合发布《区块链金融应用白皮书》，完成5项原型开发",
          keyProjects: [
            "数字资产托管系统",
            "供应链金融智能合约标准",
            "跨境支付监管科技平台"
          ]
        },
        {
          name: "环球数据有限公司",
          cooperationArea: "数据安全、隐私计算、区块链存证",
          cooperationSince: "2022年3月",
          cooperationAchievements: "共建数据安全实验室，申请8项专利",
          keyProjects: [
            "医疗数据隐私保护系统",
            "政务数据可信共享平台",
            "企业数据资产确权系统"
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.partner-table-container {
  max-width: 1200px;
  margin: 24px auto;
  font-family: 'Inter', sans-serif;
  color: #333;
}

h2 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 24px;
  text-align: center;
}

.partner-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

th {
  background-color: #f8f9fa;
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e0e0e0;
}

td {
  padding: 18px 16px;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.6;
}

.partner-name {
  font-weight: 600;
  color: #42b983; /* 保留主题色强调名称 */
}

.project-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  color: #555;
}

tr:hover {
  background-color: #f9f9f9;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .partner-table {
    font-size: 14px;
  }
  
  th, td {
    padding: 12px 8px;
  }
  
  .project-list {
    padding-left: 16px;
  }
}
</style>